<template>
  <van-tabbar route active-color="#09BB07">
    <van-tabbar-item icon="flower-o" to="/home/index">养护</van-tabbar-item>
    <van-tabbar-item icon="shop-o" to="/home/stroll">闲逛</van-tabbar-item>
    <van-tabbar-item @click="handleAdd" icon="add-o">添加</van-tabbar-item>
    <van-tabbar-item icon="bar-chart-o" to="/home/manual">手册</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" to="/home/mine">我的</van-tabbar-item>
  </van-tabbar>
  <van-share-sheet v-model:show="showShare" title="请选择添加的类型" :options="options" @select="onSelect" />
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import plantSrc from '@/assets/plant.png';
import postSrc from '@/assets/post.png';

const router = useRouter();
const options = [
  { name: '植物', icon: plantSrc, link: '/home/plant' },
  { name: '帖子', icon: postSrc, link: '/home/post' },
];
const onSelect = (option) => {
  router.push(option.link);

  showShare.value = false;
};
const showShare = ref(false);
const handleAdd = () => {
  showShare.value = true;
};

</script>

<style lang="less" scoped></style>
